<template>
  <div>
    <a-drawer
      :visible="drawerVisible"
      :width="500"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title><h2>套餐详细</h2></template>

      <div :style="{ marginBottom: '20px' }">
        <p>
          <strong>套餐名称:</strong>
          {{ recipeParams.recipeName }}
        </p>
        <p>
          <strong>描述:</strong>
          {{ recipeParams.description }}
        </p>
        <h3><strong>菜品列表:</strong></h3>
        <ul
          v-if="recipeParams.dishesInfo && recipeParams.dishesInfo.length > 0"
        >
          <li v-for="(dish, index) in recipeParams.dishesInfo" :key="index">
            {{ dish.allergenInfo }} - {{ dish.dishName || '无描述信息' }}
          </li>
        </ul>
        <p v-else>该套餐暂时没有菜品信息。</p>
      </div>
    </a-drawer>
    <!-- <a-modal
      v-model:visible="visible"
      :title="enrollParams.enrollId ? '修改报名信息' : '添加报名信息'"
      @cancel="visible = false"
      @before-ok="handleBeforeOk"
    >
      <a-form :model="enrollParams" ref="formRef">
        <a-form-item
          field="enrollTitle"
          label="报名标题"
          :rules="[{ required: true, message: '报名标题不能为空' }]"
          validate-trigger="blur"
        >
          <a-input
            style="width: 350px"
            v-model="enrollParams.enrollTitle"
            placeholder="请输入报名标题"
          />
        </a-form-item>

        <a-form-item
          field="enrollPersonNum"
          label="报名人数"
          :rules="[{ required: true, message: '报名人数不能为空' }]"
          validate-trigger="blur"
        >
          <a-input-number
            v-model="enrollParams.enrollPersonNum"
            :style="{ width: '350px' }"
            placeholder="Please Enter"
            class="input-demo"
            :min="10"
            :max="100"
          />
        </a-form-item>

        <a-form-item
          field="enrollImg"
          label="报名图片"
          :rules="[{ required: true, message: '报名图片不能为空' }]"
          validate-trigger="blur"
        >
          <a-upload
            list-type="picture-card"
            :file-list="fileList"
            image-preview
            :limit="1"
            @before-upload="beforeUpload"
          />
        </a-form-item>

        <a-form-item
          field="enrollPersonNum"
          label="报名时间"
          :rules="[{ required: true, message: '报名时间不能为空' }]"
          validate-trigger="blur"
        >
          <a-range-picker
            style="width: 350px; margin: 0 24px 24px 0"
            show-time
            :time-picker-props="{ defaultValue: ['12:12:12', '12:12:12'] }"
            format="YYYY-MM-DD HH:mm"
            show-clear
            v-model="dateRange"
            @change="onDateRangeChange"
            @ok="onOk"
          />
        </a-form-item>
      </a-form>
    </a-modal> -->

    <!-- <a-card>
      <a-space size="medium">
        <a-input-search
          :style="{ width: '280px' }"
          placeholder="请输入报名标题"
          search-button
          @search="getRecipeListByTitle"
          v-model="keyword"
        />
        <a-button @click="openVisible" type="primary">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>添加信息</template>
        </a-button>
        <a-popconfirm content="你确定要删除这些用户吗?" @ok="batchDelete">
          <a-button type="primary" status="danger">
            <template #icon>
              <icon-delete />
            </template>
            <template #default>批量删除</template>
          </a-button>
        </a-popconfirm>
      </a-space>
    </a-card> -->

    <a-card>
      <a-table :data="dishesInfoArr" :bordered="{ cell: true }">
        <template #columns>
          <a-table-column
            title="套餐名称"
            data-index="recipeName"
          ></a-table-column>
          <a-table-column
            title="描述"
            data-index="description"
          ></a-table-column>
          <a-table-column title="操作">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  @click="handleClick(record)"
                  type="primary"
                  size="mini"
                >
                  <template #icon>
                    <icon-eye />
                  </template>
                  <template #default>查看详细</template>
                </a-button>
                <a-popconfirm
                  @ok="deleteDishes(record.dishId)"
                  content="你确定要删除吗?"
                >
                  <a-button size="mini" status="danger">
                    <template #icon>
                      <icon-delete />
                    </template>
                    <template #default>删除</template>
                  </a-button>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { IconDelete, IconEye } from '@arco-design/web-vue/es/icon'
import { reqDishesInfoList } from '@/api/recipe/index'

let dishesInfoArr = ref([])
// let total = ref<number>(0)
// let keyword = ref<String>()
// let selectDishes = ref([])
// let formRef = ref()
// let dateRange = ref()
import { ref, reactive, onMounted } from 'vue'
// const visible = ref(false)
const selectedRecipe = ref({})
const drawerVisible = ref(false)

// // 假设的数据结构
// const dishesInfoArr = ref([
//   {
//     recipeName: '套餐A',
//     description: '美味套餐A的描述',
//     children: [
//       { recipeName: '菜品1', description: '肉类' },
//       { recipeName: '菜品2', description: '素食' },
//     ],
//   },
// ])
const recipeParams = reactive({
  recipeId: 0,
  recipeName: '',
  description: '',
  dishesInfo: [],
  createdAt: '',
})

const columns = [
  { title: '套餐名称', dataIndex: 'recipeName', key: 'recipeName' },
  { title: '描述', dataIndex: 'description', key: 'description' },
]

// 获取用户数据
const getRecipeInfo = async () => {
  let result: any = await reqDishesInfoList()
  console.log(result)

  if (result.status === 'OK') {
    dishesInfoArr.value = result.data
  }
}
onMounted(() => {
  getRecipeInfo()
})

const handleClick = (record: any) => {
  console.log(record)
  Object.assign(recipeParams, record)
  selectedRecipe.value = record // 更新选中的套餐信息
  drawerVisible.value = true // 显示抽屉
}
const handleOk = () => {
  drawerVisible.value = false
}
const handleCancel = () => {
  drawerVisible.value = false
}
</script>

<style lang="scss" scoped></style>
